<template>
  <view class="foods-detail">
    <u-popup
      v-model="show"
      mode="center"
      width="90%"
      height="63%"
      border-radius="20"
      :closeable="true"
      :duration="0"
    >
      <!-- 商品图片 -->
      <u-swiper
        :list="goodsList"
        :height="440"
        indicator-pos="bottomRight"
      ></u-swiper>

      <!-- 商品名称 -->
      <view class="goods">
        <view class="goods-name u-line-1">{{ goodsKindInfo.title }}</view>
        <view class="goods-stock"
          >库存：{{ goodsKindInfo.items[0].storage }}</view
        >
      </view>

      <!-- 商品价格 -->
      <view class="price">
        <view class="true-price">
          <view>￥{{ goodsKindInfo.items[0].price }}</view>
          <view>￥{{ goodsKindInfo.items[0].market_price }}</view>
        </view>
        <view class="buy-num">
          <view class="iconfont icon-jian jian" @click="reduceBuyCount"></view>
          <view class="num">{{ goodsInfo.number }}</view>
          <view class="iconfont icon-add-fill jia" @click="addByCount"></view>
        </view>
      </view>

      <view class="buy">
        <u-button :custom-style="customStyle" @click="addCar"
          >加入购物车</u-button
        >
      </view>
    </u-popup>

    <u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>

<script>
import { jugeIsLogin } from "@/common/utils";
export default {
  data() {
    return {
      show: false,
      goodsList: [
        {
          image:
            "http://maomi-shop-resource-hz.oss-cn-hangzhou.aliyuncs.com/87e16336f0cb58113cfedff2e9c05bff.jpg",
          title: "昨夜星辰昨夜风，画楼西畔桂堂东",
        },
        {
          image:
            "http://maomi-shop-resource-hz.oss-cn-hangzhou.aliyuncs.com/87e16336f0cb58113cfedff2e9c05bff.jpg",
          title: "身无彩凤双飞翼，心有灵犀一点通",
        },
      ],
      goodsKindInfo: {}, //商品信息
      customStyle: {
        marginTop: "20px", // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: "#FFFFFF",
        backgroundColor: "#D65C45",
      },
      //商品信息
      goodsInfo: {
        number: 0,
        merchant_id: null,
        goods_item_id: null,
        merchant_id: null,
      },
    };
  },
  methods: {
    /**
     * 减少购买数量
     */
    reduceBuyCount() {
      // 判断是否登陆
      if (!jugeIsLogin()) {
        return;
      }
      // 购买数量 小于零就不能减少了
      if (this.goodsInfo.number >= 1) {
        this.goodsInfo.number -= 1;
      }
    },

    /**
     * 增加购买数量
     */
    addByCount() {
      // 判断是否登陆
      if (!jugeIsLogin()) {
        return;
      }
      if (this.goodsKindInfo.items[0].storage > this.goodsInfo.number) {
        this.goodsInfo.number += 1;
      } else {
        this.$u.toast("超出库存");
      }
    },
    /**
     * 添加到购物车
     */
    addCar() {
      var carCount = 0;
      // console.log(this.$parent.buy_car);

      // goods_item_id  列表
      var item_id_list = [];
      this.$parent.buy_car.map((v) => {
        item_id_list.push(v.goods_item_id);
      });


      // 判断是否存在 购物车
      if (item_id_list.includes(this.goodsInfo.goods_item_id)) {
        // 当购物车 存在这个规格的商品
        this.$parent.buy_car.forEach((v, index) => {
          if (v.goods_item_id === this.goodsInfo.goods_item_id) {
            this.$parent.buy_car[index].number = this.goodsInfo.number;
            carCount += this.goodsInfo.number;
          } else {
            carCount += v.number;
          }
        });
      } else {
        // 不存在时候
        this.$parent.buy_car.push(this.goodsInfo);
        carCount += this.goodsInfo.number;
      }
      
      this.$parent.carCount = carCount;
      this.show = false;
      this.$refs.uTips.show({
        title: "添加成功",
        type: "success",
        duration: "2300",
      });
    },
  },
  onLoad(option) {},
};
</script>

<style scoped lang ='scss' >
@mixin flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.foods-detail {
  .goods {
    padding: 30rpx 36rpx;
    border-bottom: 1rpx solid #e6e6e6;
    .goods-name {
      color: #333333;
      font-size: 30rpx;
      font-weight: bold;
    }
    .goods-stock {
      color: #333333;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
  .price {
    @include flex-row;
    padding: 30rpx 36rpx;
    .true-price {
      @include flex-row;
      & > view:nth-child(1) {
        color: #d65c45;
        font-size: 32rpx;
        font-weight: bold;
        margin-right: 10rpx;
      }
      & > view:nth-child(2) {
        color: #999999;
        font-size: 24rpx;
        text-decoration: line-through;
      }
    }
    .buy-num {
      @include flex-row;
      .jian {
        color: #dcdcdc;
        font-size: 48rpx;
        margin-right: 20rpx;
      }
      .jia {
        color: #d65c45;
        font-size: 50rpx;
        margin-left: 20rpx;
      }
      .num {
        color: #333333;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
  }

  .buy {
    margin: 100rpx 26rpx 0 26rpx;
  }
}
</style>
